<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统架构师真题做题 - 系统架构师考试备考助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/exam.css">
    <link rel="stylesheet" href="css/exam-question.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="exam-header">
            <div class="header-left">
                <a href="real-exam.html" class="exit-btn">
                    <i class="fas fa-times"></i> 退出
                </a>
            </div>
            <div class="header-center">
                <div class="exam-progress">
                    <div class="progress-bar">
                        <div class="progress" style="width: 15%;"></div>
                    </div>
                    <div class="question-counter">11/75</div>
                </div>
            </div>
            <div class="header-right">
                <div class="exam-timer">
                    <i class="fas fa-clock"></i>
                    <span>02:15:30</span>
                </div>
            </div>
        </header>

        <!-- 题目内容 -->
        <section class="question-container">
            <div class="question-type">单选题 (2分)</div>
            <div class="question-content">
                <p>在分布式系统中，以下关于CAP理论的描述，错误的是：</p>
            </div>
            <div class="options-list">
                <div class="option-item">
                    <div class="option-marker">A</div>
                    <div class="option-content">CAP理论指的是一致性（Consistency）、可用性（Availability）和分区容错性（Partition tolerance）</div>
                </div>
                <div class="option-item">
                    <div class="option-marker">B</div>
                    <div class="option-content">在分布式系统中，三者不可兼得，最多只能同时满足其中两项</div>
                </div>
                <div class="option-item">
                    <div class="option-marker">C</div>
                    <div class="option-content">当发生网络分区时，如果要保证一致性，就必须牺牲可用性</div>
                </div>
                <div class="option-item">
                    <div class="option-marker">D</div>
                    <div class="option-content">分布式系统总是可以同时满足一致性、可用性和分区容错性三者</div>
                </div>
            </div>
        </section>

        <!-- 操作区域 -->
        <section class="question-actions">
            <div class="left-actions">
                <button class="action-btn favorite-btn">
                    <i class="far fa-star"></i>
                    <span>收藏</span>
                </button>
                <button class="action-btn note-btn">
                    <i class="far fa-sticky-note"></i>
                    <span>笔记</span>
                </button>
                <button class="action-btn report-btn">
                    <i class="far fa-flag"></i>
                    <span>报错</span>
                </button>
            </div>
            <div class="right-actions">
                <button class="nav-btn prev-btn">
                    <i class="fas fa-chevron-left"></i>
                    <span>上一题</span>
                </button>
                <button class="nav-btn next-btn">
                    <span>下一题</span>
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </section>

        <!-- 答案解析（初始隐藏） -->
        <section class="answer-explanation hidden">
            <div class="answer-header">
                <h3>答案与解析</h3>
                <button class="close-explanation">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="correct-answer">
                <span class="answer-label">正确答案：</span>
                <span class="answer-value">D</span>
            </div>
            <div class="explanation-content">
                <p>CAP理论是分布式系统的基本理论，指的是在一个分布式系统中，Consistency（一致性）、Availability（可用性）、Partition tolerance（分区容错性）这三个条件不可能同时满足，最多只能同时满足其中两个条件。</p>
                <p>当发生网络分区时，如果要保证一致性，就必须牺牲可用性（等待数据一致后再响应请求）；如果要保证可用性，就必须牺牲一致性（立即响应请求，但数据可能不一致）。</p>
                <p>因此，选项D"分布式系统总是可以同时满足一致性、可用性和分区容错性三者"的说法是错误的。</p>
            </div>
            <div class="key-points">
                <h4>知识要点</h4>
                <ul>
                    <li>CAP理论基本概念</li>
                    <li>分布式系统设计权衡</li>
                    <li>一致性和可用性的取舍</li>
                </ul>
            </div>
        </section>

        <!-- 题目导航面板（初始隐藏） -->
        <div class="question-navigator hidden">
            <div class="navigator-header">
                <h3>题目导航</h3>
                <button class="close-navigator">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="question-categories">
                <div class="category">
                    <div class="category-header">单选题 (30题)</div>
                    <div class="question-numbers">
                        <div class="number answered">1</div>
                        <div class="number current">2</div>
                        <div class="number">3</div>
                        <div class="number answered">4</div>
                        <div class="number">5</div>
                        <div class="number marked">6</div>
                        <div class="number">7</div>
                        <div class="number">8</div>
                        <div class="number">9</div>
                        <div class="number">10</div>
                        <div class="number">11</div>
                        <div class="number">12</div>
                        <div class="number">13</div>
                        <div class="number">14</div>
                        <div class="number">15</div>
                        <!-- 更多题号 -->
                    </div>
                </div>
                <div class="category">
                    <div class="category-header">多选题 (15题)</div>
                    <div class="question-numbers">
                        <div class="number">31</div>
                        <div class="number">32</div>
                        <div class="number">33</div>
                        <div class="number">34</div>
                        <div class="number">35</div>
                        <!-- 更多题号 -->
                    </div>
                </div>
                <div class="category">
                    <div class="category-header">判断题 (10题)</div>
                    <div class="question-numbers">
                        <div class="number">46</div>
                        <div class="number">47</div>
                        <div class="number">48</div>
                        <div class="number">49</div>
                        <div class="number">50</div>
                        <!-- 更多题号 -->
                    </div>
                </div>
                <div class="category">
                    <div class="category-header">案例分析题 (20题)</div>
                    <div class="question-numbers">
                        <div class="number">56</div>
                        <div class="number">57</div>
                        <div class="number">58</div>
                        <div class="number">59</div>
                        <div class="number">60</div>
                        <!-- 更多题号 -->
                    </div>
                </div>
            </div>
            <div class="navigator-actions">
                <button class="nav-action-btn submit-btn">交卷</button>
                <div class="legend">
                    <div class="legend-item">
                        <div class="number current"></div>
                        <span>当前题</span>
                    </div>
                    <div class="legend-item">
                        <div class="number answered"></div>
                        <span>已答题</span>
                    </div>
                    <div class="legend-item">
                        <div class="number marked"></div>
                        <span>已标记</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部固定工具栏 -->
        <div class="bottom-toolbar">
            <button class="toolbar-btn show-navigator-btn">
                <i class="fas fa-th"></i>
                <span>题目导航</span>
            </button>
            <button class="toolbar-btn mark-btn">
                <i class="far fa-flag"></i>
                <span>标记</span>
            </button>
            <button class="toolbar-btn check-answer-btn">
                <i class="fas fa-check-circle"></i>
                <span>查看答案</span>
            </button>
            <button class="toolbar-btn submit-exam-btn">
                <i class="fas fa-paper-plane"></i>
                <span>交卷</span>
            </button>
        </div>
    </div>

    <script src="js/exam-question.js"></script>
</body>
</html> 